<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#334256"
      text-color="#ffffff"
      active-text-color="#20a0ff"
      router
     >
     <template v-for="item in items">
      <template >
        <el-menu-item :index="item.index" :key="item.index" style="top: 50px; margin-top: 20px;">
          <i :class="item.icon" style="margin-left: 19px;"></i>
          {{ item.title }}
        </el-menu-item>
      </template>
    </template>
    </el-menu>
  </div>
</template>

<script>


export default {
    data(){
        return{
            collapse: false,
            items:[
              {
                 icon:'el-icon-house',
                 index:'/Info',
                 title:'系统首页'
              },
              {
                 icon:'el-icon-user',
                 index:'/Consumer',
                 title:'用户管理'
              },{
                 icon:'el-icon-user-solid',
                 index:'/Singer',
                 title:'歌手管理'
              },{
                 icon:'el-icon-tickets',
                 index:'/SongList',
                 title:'歌单管理'
              }
            ]
        }
    },
    computed:{
      onRoutes(){
        return this.$route.path.replace('/','');
      }
    },
}
</script>

<style scope>
.sidebar{
    /* 块状 */
    display: block;
    /* 绝对定位 */
    position: absolute;
    top: 68px;
    bottom: 0;
    background-color:#334256 ;
    /* 超越y轴的变成滚轮 */
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar{
  width: 0;
}
.sidebar-el-menu{
  width: 200px;
}
/* 循环高度100% */
.sidebar >ul{
  height: 100%;
}

</style>